<template>
  <view class="list-box">
    <jianbianVue></jianbianVue>
    <view class="lb-cent">
      <view class="back-l">
        <u-icon name="arrow-left" size="30rpx" @click="backk"></u-icon>
      </view>
      <!-- 搜索 -->
      <view class="ba">
        <u-icon name="arrow-left" size="30rpx" @click="backk"></u-icon>
      </view>
      <view class="search">
        <view class="c">
          <u-search :show-action="false" :animation="false"></u-search>
          <button class="but">搜索</button>
        </view>
      </view>
      <!-- 标题 -->
      <view class="bt">
        <u-notice-bar mode="horizontal" :list="list" :volume-icon="false"></u-notice-bar>
      </view>
      <view class="bo-cent">
        <view class="sx">
          <image src="../../static/title.png" mode=""></image>
        </view>
        <!-- 商品 -->
        <view class="jshw">
        	<view class="jshw-box" v-for="(item,index) in hawu" :key="index" @click="gopr">
        		<contboxVue :title1="item.title1" :imageurl="item.imageurl" 
        		:title2="item.title2" :title3="item.title3" :title4="item.title4"
        		:title6="item.title6" :title7="item.title7" :title5="item.title5" :title9="item.title9"
        		:title8="item.title8">
        		</contboxVue>
        	</view>
        </view>
        <view class="btt">
          <u-button type="success" @click="gocart">前往购物车</u-button>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
  import jianbianVue from '../../compoents/jianbian/jianbian.vue'
  import contboxVue from '../../compoents/contbox.vue'
  export default {
    components: {
      jianbianVue,
      contboxVue
    },
    data() {
      return {
        list: [
          "再买69 .2 可享用 满79减10"
        ],
        hawu: [{
        		imageurl:require('../../static/包子.png'),
        		title1: '江苏无锡香菇猪肉包',
        		title2: "猪肉肥美",
        		title3: "鲜甜嫩软",
        		title4: "多汁美味",
        		title5: "多汁香嫩",
        		title6: "8.79",
        		title7: "笼",
        		title9: "券",
        		title8: "减10元"
        	},
        	{
        		imageurl:require('../../static/西兰花.png'),
        		title1: '浙江临海西兰花',
        		title2: "基地直供",
        		title3: "绿色培植",
        		title4: "新鲜采摘",
        		title5: "绿色新鲜",
        		title6: "4.79",
        		title7: "斤",
        		title9: "券",
        		title8: "减10元"
        	},
        	{
        		imageurl:require('../../static/西红柿.png'),
        		title1: '云南高山大西红柿',
        		title2: "鲜嫩多汁",
        		title3: "软甜爽口",
        		title4: "入口美味",
        		title5: "美味多汁",
        		title6: "2.44",
        		title7: "斤",
        		title9: "券",
        		title8: "减10元"
        	},
        	{
        		imageurl: require('../../static/土豆.png'),
        		title1: '宁夏西吉县马铃薯',
        		title2: "基地直供",
        		title3: "绿色培植",
        		title4: "新鲜采摘",
        		title5: "绿色新鲜",
        		title6: "3.21",
        		title7: "斤",
        		title9: "券",
        		title8: "减10元"
        	}
        ],
      }
    },
    methods: {
      gopr(){
        uni.navigateTo({
          url:'/pages/product/product'
        })
      },
      backk() {
        uni.switchTab({
          url:'/pages/index/index'
        })
      },
      gocart(){
        uni.switchTab({
          url:'/pages/cart/cart'
        })
      }
    }
  }
</script>

<style lang="scss">
  .list-box {
    .lb-cent {
      width: 90%;
      height: 90vh;
      margin: auto;
      position: relative;

      .back-l {
        position: absolute;
        top: -140px;
        left: 10px;
      }

      .ba {
        position: relative;
        top: -95px;
        left: 10px;
      }

      .search {
        width: 85%;
        height: 100rpx;
        position: relative;
        position: absolute;
        top: -100px;
        right: 0px;

        .but {
          background-color: #49ba7c;
          color: white;
          font-size: 25rpx;
          width: 150rpx;
          height: 50rpx;
          line-height: 50rpx;
          border-radius: 25rpx;
          position: absolute;
          top: 3px;
          right: 5px;
        }
      }
      .bt{
        width: 100%;
        position: absolute;
        top: -50px;
      }
      .bo-cent{
        width: 100%;
        background-color: #f9f9f9;
        .sx{
          width: 100%;
          height: 85rpx;
          image{
            width: 100%;
            height: 100%;
          }
        }
        .jshw {
        	width: 100%;
          margin-top: 35rpx;
        	display: flex;
        	justify-content: space-between;
        	flex-wrap: wrap;
        	.jshw-box {
        		margin-bottom: 25rpx;
        		width: 48%;
        		border-radius: 10%;
        	}
        }
        .btt{
          margin: 20px 0px;
        }
      }
      
    }

  }
</style>